<script>
import {onBeforeMount, onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onActivated,onDeactivated,onErrorCaptured} from "vue";

export default {
  name: "App",
  components: {Son},
  setup(props, context) {
    /*
    每个主要的（main）Vue生命周期事件会对应2个钩子函数，分别在事件开始前和事件结束后调用，在Vue app中可以应用4个主要事件（8个主要钩子（main hooks）函数）
       > Creation ——组件创建时运行
       >
       > Mounting ——挂载在DOM时运行
       >
       > Updates ——响应数据修改时运行
       >
       > Destruction ——元素销毁前运行

   在Composition API中，我们需要先导入对应的生命周期钩子才能使用它。这么做，是为了让我们的项目尽可能的轻量化。
   除了`beforeCreate`和`created`（被setup方法本身代替），共有9个Options API生命周期相对应的方法可以在setup中使用。
       > onBeforeMount——挂载开始前调用
       > onMount——挂载后调用
       > onBeforeUpdate——当响应数据改变，且重新渲染前调用
       > onUpdated——重新渲染后调用
       > onBeforeUnmount——Vue实例销毁前调用
       > onUnmounted——实例销毁后调用
       > onActivated——当keep-alive组件被激活时调用
       > onDeactivated——当keep-alive组件取消激活时调用
       > onErrorCaptured——从子组件中捕获错误时调用
    */
    onBeforeMount(() => {

    })
    onMounted(() => {

    })
    onBeforeUpdate(() => {

    })
    onUpdated(() => {

    })
    onBeforeUnmount(() => {

    })
    onUnmounted(() => {

    })
    onActivated(() => {

    })
    onDeactivated(() => {

    })
    onErrorCaptured(() => {

    })
  }
}
</script>
<template>
  <div id="app">

  </div>
</template>

<style lang="less"></style>
